<template>
    <div class="entity-json">
        <editor ref="editor" v-model="entity" language="java" width="42%" height="90vh"></editor>
        <div class="buttons">
            <q-btn class="btn" color="orange" @click="convert2JsonClick"> >></q-btn>
            <q-btn class="btn" color="orange" @click="convert2EntityClick"> <<</q-btn>
        </div>
        <editor ref="jsonEditor" v-model="json" language="javascript" width="42%" height="90vh"></editor>
    </div>
</template>

<script type="text/ecmascript-6">
  import Editor from "../../components/editor/Editor";
  import convert2Json from "./convert2Json";

  /**
   * @author 白雨浓
   * @date 2019/1/10 15:51
   *
   * Java Entity 转 JSON
   **/
  export default {
    name: 'Entity2JSON',
    components: {Editor},
    data() {
      return {
        entity: '',
        json: '',
        height: 0
      }
    },
    methods: {
      convert2JsonClick() {
        try {
          this.json = convert2Json(this.entity)
        } catch (e) {
          this.$q.dialog({title: '错误', message: e.toString()});
        }
      },
      convert2EntityClick() {

      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .entity-json {
        display flex
        justify-content space-around
        align-items center
        padding 10px
    }

    .buttons {
        width 8%
        text-align center

        .btn {
            display block
            width 100%
            max-width 80px
            margin 20px auto
        }
    }
</style>
